<%--
  Created by IntelliJ IDEA.
  User: chenweiyi
  Date: 2018/2/8
  Time: 上午10:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>支付测试</title>
    <%@include file="header.jsp"%>
    <style type="text/css">
        .weui-cells__title{
            text-align: center;
            color:#0bb20c;
            font-size:1.5em;
        }
    </style>
</head>
<body>

<div class="weui-cells weui-cells_form">

    <div class="weui-cells__title">支付测试表单</div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">APPID</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" id="appId" pattern="[0-9a-zA-Z]*" value="BDE5203A628CF708ACD824FE25B5B777" readonly="readonly"/>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">商品标题</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" placeholder="请输入商品标题" id="detail">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">附加信息</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" placeholder="请输入附加信息" id="attach">
        </div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">价格</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="number" pattern="[0-9]+" placeholder="请输入价格(分)" id="totalFee"/>
        </div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">订单号</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" pattern="[0-9a-zA-Z]*" placeholder="请输入订单号" id="outTradeNo"/>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">异步通知地址</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text"  id="notifyUrl" value="http://fc3411a5.ngrok.io/pay-demo/notify.do"/>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">支付返回地址</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text"  id="returnUrl" value="http://fc3411a5.ngrok.io/pay-demo/pages/result.jsp"/>
        </div>
    </div>
    <div class="weui-btn-area">
        <a class="weui-btn weui-btn_primary" id="showTooltips">确定</a>
    </div>
</div>
</body>
<script type="text/javascript">

    $(function(){

        $.ajaxSetup({
            crossDomain: true,
            xhrFields:{
                withCredentials:true
            }
        });

        /**
         * 随机字符串
         */
        function randomStr(length){

            var str = "0123456789abcdzfghijklmnopqrstuvwxyz";
            var res = "";
            for(var i = 0;i < length ;i++ ){
                var index = Math.random() * str.length;
                res += str.charAt(index);
            }
            return res;
        }

        /**
         * 获取当前时间戳
         * @returns {number}
         */
        function getCurrentTimestamp(){
           return  new Date().getTime();
        }


        /**
         * 设置订单号
         */
        $('#outTradeNo').on('focus',function(){
            $(this).val(randomStr(19)+getCurrentTimestamp());
        });

        /**
         * keyup
         */
        $('#outTradeNo').on('keyup',function(){
            $(this).val(randomStr(19)+getCurrentTimestamp());
        });
       function createOrder(){

           var appId =  $('#appId').val();
           var detail = $('#detail').val();
           var attach = $('#attach').val();
           var totalFee = $('#totalFee').val();
           var outTradeNo = $('#outTradeNo').val();
           var notifyUrl = $('#notifyUrl').val();
           var returnUrl = $('#returnUrl').val();
           var secretKey = "8D496C86A24E0237FBC61BDB6AA998D5";
           var data = {
               appId : appId,
               detail: detail,
               attach: attach,
               totalFee : totalFee,
               outTradeNo : outTradeNo,
               notifyUrl : notifyUrl,
               returnUrl : returnUrl
           }
           var keys = ["appId","detail","attach","totalFee","outTradeNo","notifyUrl","returnUrl"];
           var sign = "";
           keys.sort();
           for(var index in keys){
                if(data[keys[index]]){
                    sign += keys[index] + "=" + data[keys[index]] + "&";
                }
           }
           sign += "key=" + secretKey;
           var signature = $.md5(sign).toUpperCase();
           data['signature'] = signature;
           $.post('http://fc3411a5.ngrok.io/pay-web/pay/unifiedOrder',data,function(result){
               if(result.code == 'success'){
                   var mchId = result.mchId;
                   var tradeStatus = result.tradeStatus;
                   var payUrl = result.payUrl;
                   var signature = result.signature;
                   var attach = result.attach;
                   var payUrl = decodeURIComponent(result.payUrl);
                   //此处省略签名校验
                   window.location.href = payUrl;

               }else{
                   $.toast(result.description,'warn');
               }

           },'json');


       }
       $('#showTooltips').on('click',createOrder);
    });
</script>
</html>
